<template>
  <div>
    <el-row class="home" :gutter="gutter">
      <el-col :span="8" style="margin-top: 20px">
        <el-card shadow="hover">
          <div class="user">
            <div class="userInfo">
              <div class="avatar">
                <img :src="userImage" alt="" />
              </div>
              <div class="text">
                <p class="name">Admin</p>
                <p class="access">超级管理员</p>
              </div>
            </div>
            <div class="loginInfo">
              <p>上次登录时间:<span>2021-07-19</span></p>
              <p>上次登录地点:<span>武汉</span></p>
            </div>
          </div>
        </el-card>

        <el-card style="margin-top: 20px; height: auto" shadow="hover">
          <el-table :data="tableData">
            <el-table-column
              v-for="(value, key) in tableLabel"
              :key="key"
              :prop="key"
              :label="value"
            >
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col style="margin-top: 20px" :span="16">
        <div class="numBox">
          <el-card
            class="numCard"
            shadow="hover"
            v-for="item in countData"
            :key="item.name"
            :body-style="{ display: `flex`, padding: 0 }"
          >
            <i
              class="icon"
              :class="`el-icon-` + item.icon"
              :style="{ background: item.color }"
            ></i>
            <div class="detail">
              <p class="num">¥{{ item.value }}</p>
              <p class="text">{{ item.name }}</p>
            </div>
          </el-card>
        </div>
        <el-card style="height: 200px; margin-top: 10px" shadow="hover">
          <!-- <div style="height: 200px" ref="echarts"></div> -->
          <echart :chartData="echartData.order" style="height: 200px"/>
        </el-card>
        <div class="graph">
          <el-card shadow="hover">
            <!-- <div style="height: 200px" ref="userEcharts"></div> -->
            <echart :chartData="echartData.user" style="height: 200px"/>
          </el-card>
          <el-card shadow="hover">
            <!-- <div style="height: 200px" ref="videoEcharts"></div> -->
            <echart :chartData="echartData.video" :isAxisChart="false" style="height: 200px"/>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getData } from "../../api/data.js";
// import * as echarts from "echarts";
import Echart from "../../src/components/Echarts.vue";

export default {
  components: { Echart },
  name: "home",
  data() {
    return {
      gutter: 20,
      userImage: require("../../src/assets/logo.png"),
      tableData: [
        { name: "R89", todayBuy: 100, monthBuy: 300, totalBuy: 300 },
        { name: "R9x", todayBuy: 200, monthBuy: 300, totalBuy: 400 },
        { name: "R96", todayBuy: 300, monthBuy: 300, totalBuy: 500 },
        { name: "R95", todayBuy: 140, monthBuy: 300, totalBuy: 340 },
        { name: "F03", todayBuy: 150, monthBuy: 300, totalBuy: 380 },
      ],
      tableLabel: {
        name: "型号",
        todayBuy: "今日销量",
        monthBuy: "月销量",
        totalBuy: "总销量",
      },
      countData: [
        { name: "支付订单", value: 1003, icon: "success", color: "#22b8ca" },
        { name: "收藏订单", value: 2300, icon: "star-on", color: "#ffbc7d" },
        { name: "未支付订单", value: 3040, icon: "s-goods", color: "#51adf3" },
        { name: "月支付订单", value: 1240, icon: "success", color: "#22b8ca" },
        { name: "月收藏订单", value: 1510, icon: "star-on", color: "#ffbc7d" },
        {
          name: "月未支付订单",
          value: 1210,
          icon: "s-goods",
          color: "#51adf3",
        },
      ],
      echartData: {
        order: {
          xData: [],
          series: [],
        },
        user: {
          xData: [],
          series: [],
        },
        video: {
          series: [],
        },
      },
    };
  },
  mounted() {
    getData().then((res) => {
      const { code, data } = res.data;
      if (code === 20000) {
        this.tableData = data.tableData;
        // console.log(data);
        const order = data.orderData;
        const xdate = order.date;
        const keyArray = Object.keys(order.data[0]);
        const series = [];
        keyArray.forEach((key) => {
          series.push({
            name: key,
            data: order.data.map((item) => item[key]),
            type: "line",
          });
        });

        // const option = {
        //   xAxis: {
        //     data: xdate,
        //   },
        //   yAxis: {},
        //   legend: { data: keyArray },
        //   series,
        //   tooltip: {
        //     trigger: "axis",
        //   },
        // };

        this.echartData.order.xData = xdate;
        this.echartData.order.series = series;

        // const Echarts = echarts.init(this.$refs.echarts);
        // Echarts.setOption(option);
        // 柱状图
        // const userOption = {
        //   legend: {
        //     textStyle: {
        //       color: "#333",
        //     },
        //   },
        //   grid: {
        //     left: "20%",
        //   },
        //   tooltip: {
        //     trigger: "axis",
        //   },
        //   xAxis: {
        //     type: "category",
        //     data: data.userData.map((item) => item.date),
        //     axisLine: {
        //       lineStyle: {
        //         color: "#17b3a3",
        //       },
        //     },
        //     axisLabel: {
        //       interval: 0,
        //       color: "#333",
        //     },
        //   },
        //   yAxis: [
        //     {
        //       type: "value",
        //       axisLine: {
        //         lineStyle: {
        //           color: "#17b3a3",
        //         },
        //       },
        //     },
        //   ],
        //   color: ["#2ec7c9", "#b6a2de"],
        //   series: [
        //     {
        //       name: "新增用户",
        //       data: data.userData.map((item) => item.new),
        //       type: "bar",
        //     },
        //     {
        //       name: "活跃用户",
        //       data: data.userData.map((item) => item.active),
        //       type: "bar",
        //     },
        //   ],
        // };

        this.echartData.user.xData = data.userData.map((item) => item.date);
        this.echartData.user.series = [
          {
            name: "新增用户",
            data: data.userData.map((item) => item.new),
            type: "bar",
          },
          {
            name: "活跃用户",
            data: data.userData.map((item) => item.active),
            type: "bar",
          },
        ];

        // const UserEcharts = echarts.init(this.$refs.userEcharts);
        // UserEcharts.setOption(userOption);

        // 饼图
        // const videoOption = {
        //   tooltip: {
        //     trigger: "item",
        //   },
        //   color: [
        //     "#0f78f4",
        //     "#dd536b",
        //     "#9462e5",
        //     "#a6a6a6",
        //     "#e1bb22",
        //     "#39c362",
        //     "#3ed1cf",
        //   ],
        //   series: [
        //     {
        //       data: data.videoData,
        //       type: "pie",
        //     },
        //   ],
        // };

        // const videoEcharts = echarts.init(this.$refs.videoEcharts);
        // videoEcharts.setOption(videoOption);

        this.echartData.video.series = [
          {
            data: data.videoData,
            type: "pie",
          },
        ];
      }
    });
  },
};
</script>

<style lang="less" scoped>
.user {
  .userInfo {
    display: flex;
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
    .avatar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
      }
    }
    .text {
      line-height: 1.5;
      text-align: left;
      margin-left: 20px;
      .name {
        font-size: 20px;
        font-weight: 700;
        margin-top: 16px;
        margin-bottom: 0;
      }
      .access {
        font-size: 10px;
        font-weight: 400;
        margin-top: 10px;
        color: #999;
      }
    }
  }
  .loginInfo {
    padding-top: 20px;
    text-align: left;
    p {
      line-height: 2;
      margin: 0;
      font-size: 14px;
      color: #666;
      span {
        margin-left: 50px;
        color: black;
      }
    }
  }
}
.numBox {
  display: flex;
  justify-content: space-between;
  align-content: center;
  flex-wrap: wrap;
  .numCard {
    width: 32%;
    margin: 0;
    box-sizing: border-box;
    margin-bottom: 10px;
    .icon {
      width: 35%;
      vertical-align: bottom;
      font-size: 36px;
      padding-top: 20px;
      color: white;
    }
    .detail {
      flex: 1;
      text-align: left;
      padding-left: 20px;
      .num {
        margin: 10px 0;
        font-size: 20px;
        font-weight: 700;
      }
      .text {
        margin: 10px 0;
      }
    }
  }
}
.graph {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  .el-card {
    width: 49%;
    height: 240px;
  }
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
